<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MaMa</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="static/dist/css/barrager.css">
    <link rel="stylesheet" type="text/css" href="static/pick-a-color/css/pick-a-color-1.2.3.min.css">
    <script type="text/javascript" src="static/js/clay.min.js"></script>

</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #canvasBox {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        top: auto;
    }


    .con{
        position:absolute;
        bottom:0;
        width:100%;
        height:50px;
        background:black;
        opacity:0.2;
    }

    .con p{
        position:absolute;
        bottom:0;
        width:100%;
        text-align:center;
    }
</style>
<body>
<div id="canvasBox"></div>

<div class="container" style="overflow: hidden">
    <section id="custom" class="bb-section">
        <div class="col-sm-6">
            <input class="form-control" name="info" type="text" placeholder="说点什么"
                   style="background-color: #dddddd"/>
        </div>
        <div class="col-sm-3">
            <button class="btn btn-primary bb-light-blue" onclick="run_send()"
                    style="background-color: #dddddd"> 发送
            </button>
            <button class="btn btn-primary bb-light-blue" onclick="clear_barrage()" style="background-color: #dddddd">
                清除
            </button>
        </div>
    </section>
</div>
<div class="con">
    <p style="color: #2e6da4">Copyright ©2021  <a href="http://妈妈.show">世上只有妈妈好</a> 吉ICP备2021009348号-1</p>
</div>
<!-- JS dependencies -->
<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/tinycolor-0.9.15.min.js"></script>
<script type="text/javascript" src="static/dist/js/jquery.barrager.min.js"></script>

<script type="text/javascript" src="static/pick-a-color/js/pick-a-color-1.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
        integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
        crossorigin="anonymous"></script>
<script type="text/javascript">
    // 发送给服务端
    let socket = io();
    socket.on('connect', function () {
        socket.emit('my event', {data: '连接成功！'});
    });


    String.prototype.format = function (args) {
        let result = this;
        if (arguments.length < 1) {
            return result;
        }
        let data = arguments;
        if (arguments.length == 1 && typeof (args) == "object") {
            data = args;
        }
        for (let key in data) {
            let value = data[key];
            if (undefined != value) {
                result = result.replace("{" + key + "}", value);
            }
        }
        return result;
    }

    let barrager_code =
        'let item={\n' +
        "   img:'{img}', //图片 \n" +
        "   info:'{info}', //文字 \n" +
        "   href:'{href}', //链接 \n" +
        "   close:{close}, //显示关闭按钮 \n" +
        "   speed:{speed}, //延迟,单位秒,默认6 \n" +
        "   bottom:{bottom}, //距离底部高度,单位px,默认随机 \n" +
        "   color:'{color}', //颜色,默认白色 \n" +
        "   old_ie_color:'{old_ie_color}', //ie低版兼容色,不能与网页背景相同,默认黑色 \n" +
        " }\n" +
        "$('body').barrager(item);"
    ;


    function run_send() {
        let info = $('input[name=info]').val();
        //(info == '') ? info = '请填写弹幕文字' : info = info;
        socket.emit('client_event', {
            data: info
        });
        return false;
    }

    // 接受服务端信息
    socket.on('server_response', function (msg) {
        let info = msg.data;
        //$('input[name=info]').val();
        (info == '') ? info = '请填写弹幕文字' : info = info;
        let href = "";
        let speed = 8;
        let bottom = 70;
        let code = barrager_code;
        let window_height = $(window).height() - 150;
        bottom = Math.floor(Math.random() * window_height + 40);
        let item = {
            'img': 'static/img/cute.png',
            'info': info,
            'href': href,
            'close': true,
            'speed': speed,
            'bottom': bottom,
            'color': '#fff',
            'old_ie_color': '#000000'
        };
        code = code.format(item);
        eval(code);
    });

    function clear_barrage() {
        $.fn.barrager.removeAll();
    }

</script>
</body>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

<script>
    var canvasBox = document.getElementById("canvasBox")
    var W = canvasBox.clientWidth
    var H = canvasBox.clientHeight

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight)
    }

    window.addEventListener('resize', onWindowResize, false)

    var num = 0;
    var scene, camera, renderer, light;

    function intScene() {
        scene = new THREE.Scene()
    }

    function intCamera() {
        camera = new THREE.PerspectiveCamera(45, W / H, 1, 1000);
        camera.position.set(0, 0, 500);
        camera.up.set(0, 1, 0)
        camera.lookAt({x: 0, y: 0, z: 0})
    }

    function intRender() {
        renderer = new THREE.WebGLRenderer({antialias: true})
        renderer.setSize(W, H)
        canvasBox.appendChild(renderer.domElement)
    }

    function intLight() {
        light = new THREE.DirectionalLight(0xffffff, 1)
        light.position.set(50, 50, 500)
        scene.add(light)
    }

    var xkbg, earth, cloud;
    var SEPARATION = 25, AMOUNTX = 34, AMOUNTY = 20;
    var particles, particle, count = 0;

    function intModels() {
        /* 宇宙背景 */
        var yz_geometry = new THREE.SphereGeometry(500, 500, 50);
        var yz_material = new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('../static/images/negy.jpg'),
            side: THREE.DoubleSide
        });
        xkbg = new THREE.Mesh(yz_geometry, yz_material);
        xkbg.position.set(0, 0, 0);
        scene.add(xkbg);
        //地球
        var earth_geometry = new THREE.SphereGeometry(100, 50, 50);
        var earth_material = new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('../static/images/earth4.jpg'),
            side: THREE.DoubleSide
        });
        earth = new THREE.Mesh(earth_geometry, earth_material);
        earth.position.set(0, 0, 0);
        earth.rotation.x = 0.42;
        earth.rotation.y = 60;
        scene.add(earth);
        //云层
        var cloud_geometry = new THREE.SphereGeometry(101, 50, 50);
        var cloud_material = new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('../static/images/earth_cloud.png'),
            transparent: true,
            opacity: .8
        });
        cloud = new THREE.Mesh(cloud_geometry, cloud_material);
        cloud.position.set(0, 0, 0);
        earth.add(cloud);
        //云层2
        var cloud2_geometry = new THREE.SphereGeometry(102, 50, 50);
        var cloud2_material = new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('../static/images/earth_cloud.png'),
            transparent: true,
            opacity: .8
        });
        cloud2 = new THREE.Mesh(cloud2_geometry, cloud2_material);
        cloud2.position.set(0, 0, 0);
        cloud2.rotation.y = 10;
        earth.add(cloud2);
    }

    var mouseX, mouseY, isMove = true;

    //自转
    function zizhuan() {
        if (isMove) {
            requestAnimationFrame(zizhuan);
            earth.rotation.y -= 0.0005;
            renderer.render(scene, camera);
        }
        xkbg.rotation.y -= 0.0005;
    }

    //拖拽
    document.onmousedown = function (e) {
        isMove = false;
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
    document.onmousemove = function rt(e) {
        if (!isMove) {
            var disX = e.pageX - mouseX;
            var disY = e.pageY - mouseY;
            requestAnimationFrame(zizhuan);
            earth.rotation.x = earth.rotation.x > 0.8 ? 0.8 : earth.rotation.x;
            earth.rotation.x = earth.rotation.x < -0.8 ? -0.8 : earth.rotation.x;
            earth.rotation.x += disY * 0.00005 * Math.PI;
            earth.rotation.y += disX * 0.00005 * Math.PI;
            renderer.render(scene, camera);
        }
    }
    document.onmouseup = function () {
        console.log(xkbg.rotation.y)
        console.log(earth.rotation.x)
        isMove = true;
        setTimeout(function () {
            zizhuan();
        }, 1000)
    }

    //滑动鼠标让地球放大缩小
    function intsScale() {
        $(document).on('mousewheel DOMMouseScroll', function (ev) {
            var e = ev || event;
            e.preventDefault();
            var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
            var delta = Math.max(-1, Math.min(1, value));
            if (delta == 1) {
                num++;
                num = num > 10 ? 10 : num;
            } else {
                num--;
                num = num < -15 ? -15 : num;
            }
            camera.position.set(0, 0, 400 + num * 10);
        });
    }

    function intStart() {
        intScene();
        intCamera();
        intRender();
        intLight();
        intModels();
        zizhuan();
        intsScale();
        renderer.render(scene, camera);
    }

    intStart();
</script>
</html>